<template>
  <div class="settlement">
    <a-row>
      <a-col :lg="10" :xl="8" :xxl="6">
        <div class="top-btns">
          <a-button type="primary" @click="addBank"><a-icon type="form" />新增</a-button>
          <a-button type="primary" @click="backList"><a-icon type="rollback" />返回</a-button>
        </div>
      </a-col>
    </a-row>
    <a-table
      :columns="columns"
      rowKey="id"
      :dataSource="columnsData"
      :pagination="pagination"
      :loading="loading"
    >
      <span slot="action" slot-scope="text, item" class="action-wrap">
        <a @click="()=> confirmHintDel(item, 'del')">删除</a>
      </span>
    </a-table>
    <div class="modal-wrap">
      <!-- 删除确认框 -->
      <confirm-modal :hint="hint" @handleConfirm="deleteList" ref="openModal" />
      <!-- 新增银行卡 -->
      <a-modal
        title="新增银行卡"
        class="middle-moadal"
        :maskClosable="false"
        :destroyOnClose="true"
        v-model="addVis"
        @ok="confirmHint('', 'save')"
      >
        <div class="audit-msg">
          <a-form-item label="*账户类型：">
            <a-select v-model="params.bank_type" placeholder="请选择账户类型">
              <a-select-option :value="2">私户</a-select-option>
              <a-select-option :value="1" v-if="partnerType===2">公户</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="*开户银行：">
            <a-select placeholder="请选择开户银行" v-model="params.bankname" @change="handleBankChange">
              <a-select-option v-for="item in banknames" :key="item.id" :value="item.id">
                <img class="bank-icon" v-if="item.icon_s" :src="item.icon_s" alt />
                {{item.bankname}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            label="*银行账号："
          >
            <a-input 
              v-model.trim="params.bankcard"
              placeholder="请输入银行账号"
            />
          </a-form-item>
          <a-form-item label="*开户银行支行：">
            <a-input v-model.trim="params.branchname" placeholder="请输入开户银行支行" />
          </a-form-item>
          <!-- 开户地区 -->
          <a-form-item label="*开户地区">
            <area-select
              :tiptxt="tiptxt"
              :createPlace="area"
              @handlePlace="selectBranchArea"
              placeholder="请选择开户地区"
            />
          </a-form-item>
        </div>
      </a-modal>
      <!-- 保存确认框 -->
      <confirm-modal :hint="hint" @handleConfirm="handleSave" ref="openSave" />
    </div>
  </div>
</template>

<script>
// 结算信息
import { partnerBank, partnerDeleteBank, partnerBankStore } from '../../../store/providerApi'
import { sysbank } from "../../../store/action"
let datas;
export default {
  data() {
    return {
      tiptxt: '请选择开户地区',
      addVis: false,
      hint: "",
      form: this.$form.createForm(this),
      gutter: {
        xs: 8,
        sm: 16,
        md: 16,
        lg: 24,
        xl: 24,
        xxl: 10
      },
      pagination: false,
      loading: false,
      banknames: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'id'
        },
        {
          title: '开户名称',
          dataIndex: 'card_user'
        },
        {
          title: '身份证号码',
          dataIndex: 'card_idno'
        },
        {
          title: '银行预留手机',
          dataIndex: 'phone'
        },
        {
          title: '银行名称',
          dataIndex: 'bankname'
        },
        {
          title: '银行账号',
          dataIndex: 'bankcard'
        },
        {
          title: '银行支行名称',
          dataIndex: 'branchname'
        },
        {
          title: '开户省份',
          dataIndex: 'province_name'
        },
        {
          title: '开户城市',
          dataIndex: 'city_name'
        },
        {
          title: '开户区/县',
          dataIndex: 'district_name'
        },
        {
          title: '账号类型',
          dataIndex: 'type',
          customRender(type) {
            if (type == 1) {
              return '对公'
            } else if (type == 2) {
              return '对私'
            }
          }
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' }
        }
      ],
      columnsData: [],
      params: {
        bank_type: '', // 账户类型 1对公2对私 
        bank_id: '',
        bankcard: '',
        branchname: '',
        province_id: '',
        city_id: '',
        district_id: '',
      },
      partnerType: '',
      area: []
    }
  },
  mounted () {
    this.pageInit()
  },
  methods: {
    pageInit() {
      partnerBank({
        id: this.$route.query.id
      }).then(res => {
        this.columnsData = res.data.list
        this.partnerType = res.data.partner_type
      })
    },
    // 开户地区
    selectBranchArea({ area, provinceId, cityId, districtId }) {
      this.area = area
      this.params.province_id = provinceId;
      this.params.city_id = cityId;
      this.params.district_id = districtId;
    },
    // 删除列表
     // 删除时的确认框
    confirmHintDel(item, type) {
      if (type === "del") {
        this.hint = 6;
      }
      this.itemMsg = item
      this.$refs.openModal.openModal()
    },
    deleteList(item) {
      partnerDeleteBank({
        id: this.itemMsg.uuid
      }).then(res => {
        this.$message.success(res.data.message)
        this.pageInit()
        // this.$refs.pageBand.getEvent()
      })
    },
    handleBankChange(val) {
      this.params.bank_id = val;
    },
    // 新增银行卡
    addBank () {// 系统银行
      sysbank().then(res => {
        this.banknames = res.data;
      })
      this.addVis = true
    },
    //保存
    // 保存时的确认框
    confirmHint(item, type) {
      this.saveMsg()
      var isEmpty = false
      Object.keys(datas).forEach(function(key){
        if (datas[key] === '') {
          isEmpty = true
        }
      })
      if (isEmpty) {
        this.$message.info('信息填写不完整,无法保存!')
      } else {
        if (type === "save") {
          this.hint = 5
        }
        this.$refs.openSave.openModal();
      }
    },
    saveMsg () {
      datas = {
        id: this.$route.query.id,
        bank_id: this.params.bank_id,	
        bankcard: this.params.bankcard,
        branchname: this.params.branchname,
        province_id: this.params.province_id,
        city_id: this.params.city_id,
        district_id: this.params.district_id,
        type: this.params.bank_type
      }
    },
    handleSave () {
      this.saveMsg()
      partnerBankStore(datas).then(res => {
        this.$message.success(res.data.message)
        this.addVis = false
        this.pageInit()
      })
    },
    backList() {
      this.$router.push('/menu/provider/list')
    }
  }
}
</script>

<style lang="scss" scoped>
.settlement {
  margin-top: 15px;
  .top-btns{
    margin-bottom: 0;
  }
}
</style>